<template>
  <view style="padding: 30rpx;">
    <!-- 报修信息 -->
    <view>
      <view class="bxdetail">
        <view style="font-size: larger;">报修详情</view>
        <view>
          <view class="bxtitle" >报修时间</view>
          <view class="bxdata" >{{repair.releaseTime}}</view>
        </view>
        <view>
          <view class="bxtitle">报修区域</view>
          <view class="bxdata" >{{repair.repairArea}}</view>
        </view>
        <view>
          <view class="bxtitle">报修类型</view>
          <view class="bxdata" >{{repair.type}}</view>
        </view>
        <view>
          <view class="bxtitle" >报修描述</view>
          <view class="bxdata">{{repair.detail}}</view>
        </view>
        <view style="padding-bottom: 30rpx;">
          <view class="bxtitle">故障图片</view>
          <view class="bxdata" style="display: flex;flex-wrap: wrap;">
            <view v-for="(item,index) in repair.img" :key="index" @click="preview(index)" style="width: 48%;margin: 1%;">
                <image :src="item" style="width: 100%;height: 200rpx;"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 维修说明 -->
    <view class="wxshuoming" v-if="repair.status==='已维修' || repair.status==='已评价'">
      <view style="font-size: larger;
      border-bottom: 1rpx solid #bec1ca;
      ">维修说明</view>
      <view>{{repair.finishState}}</view>
    </view>
    <!-- 报修进度 -->
    <view class="bxjindu" style="padding-left: 20rpx;">
      <view style="font-size: larger;
      border-bottom: 1rpx solid #bec1ca;
      ">报修进度</view>
      <!-- 步骤条 -->
      <view style="padding-top: 20rpx;padding-left: 50rpx;">
        <u-steps :current="stepsCurrent" direction="column">
        		<u-steps-item title="发起报修" :desc="repair.releaseTime">
        		</u-steps-item>
        		<u-steps-item title="即将上门维修" :desc="repair.acceptTime==null?'':repair.acceptTime">
        		</u-steps-item>
        		<u-steps-item title="维修完成" :desc="repair.finishTime==null?'':repair.finishTime"></u-steps-item>
            <u-steps-item title="已评价" :desc="repair.evaluateTime==null?'':repair.evaluateTime"></u-steps-item>
        	</u-steps>
      </view>
    </view>
    <view v-if="repair.status==='已评价'">
      <!-- 星级 -->
      <view class="title"  style="font-size: larger;
                                  border-bottom: 1rpx solid #bec1ca;">业主评价</view>
      <view style="background-color: #FFFFFF;
                   padding-top: 30rpx;
                   display: flex;
                   justify-content: space-around;">
        <u-rate :count="count" v-model="repair.evaluateStar" disabled="true" gutter="10" size="80rpx"></u-rate>
        <view style="padding-top: 20rpx;width: 120rpx;color: #959595;">{{startext[repair.evaluateStar-1]}}</view>
      </view>
      <!-- 描述 -->
      <view class="title"  style="font-size: larger;
                                  border-bottom: 1rpx solid #bec1ca;">评价描述</view>
      <view style="padding: 30rpx;">{{repair.evalueteDetail}}</view>
    
    </view>


  </view>
</template>

<script>
  export default {
    data() {
      return {
        repair:{},
        stepsCurrent:0,
        count: 5,//最多几颗星
        starvalue: 5,//实际几颗星  5只是初始化，具体应该从数据库获取再改变这个值
        startext:['非常差','差','一般','好','非常好'],//星对应的描述等级
        assessdetail: '',//评价描述
      };
    },
    onLoad(option){
      console.log(option.id)
      this.getRepairDetail(option.id);
      
    },
    methods:{
      // 实现图片的预览效果
      preview(index) {
        // 调用 uni.previewImage() 方法预览图片
        uni.previewImage({
          // 从指定下标开始预览
          current:index,
          // 所有图片 url 地址的数组
          urls: this.repair.img
        })
      },
      async getRepairDetail(id){
        const {data: res} = await uni.$http.post('/repair/getrepairbyid', id)
        if (res.status !== 200) return uni.$showMsg()
        console.log(res.data)
        // 图片url处理
        var tempRepair=res.data;
        var imgArr= tempRepair.img.split(";");
        tempRepair.img=[];
        for(var i=0;i<imgArr.length-1;i++){//为了除去最后一个空的，所以是i<imgArr.length-1
          tempRepair.img[i]=imgArr[i];
        }
        this.repair=tempRepair;
        switch(this.repair.status){
          case '新任务' :
              this.stepsCurrent=0;
              break;
          case '已接单' :
              this.stepsCurrent=1;
              break;
          case '已维修' :
              this.stepsCurrent=2;
              break;
          case '已评价' :
              this.stepsCurrent=3;
              break;
          default:
              this.stepsCurrent=0;
              break;
        }
        
      },
    },
  }
</script>

<style lang="scss">
  .bxdetail,.wxshuoming,.bxjindu{
    background-color: #FFFFFF;
    padding-top: 30rpx;
  }
  .bxdetail>view,.wxshuoming>view{
    display: flex;
    margin: 20rpx;
  }
  .wxshuoming>view,.bxjindu>view{
    padding-bottom: 30rpx;
  }
  .bxtitle{
    width: 40%;
    color: #93969d;
  }
  .bxdata{
    width: 60%;
  }
</style>
